<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
  <title>湖南省自来水公司营销管理信息系统 - 员工登陆</title>

  <link rel="stylesheet" href="./css/reset.css" type="text/css" media="screen" title="no title"/>
  <link rel="stylesheet" href="./css/text.css" type="text/css" media="screen" title="no title"/>
  <link rel="stylesheet" href="./css/form.css" type="text/css" media="screen" title="no title"/>
  <link rel="stylesheet" href="./css/buttons.css" type="text/css" media="screen" title="no title"/>
  <link rel="stylesheet" href="./css/login.css" type="text/css" media="screen" title="no title"/>

</head>

<body>
<div id="app">
  <div id="login_background">
    <div id="login">
      <h1>员工登陆</h1>
      <div id="login_panel">
        <form @submit.prevent="login()">

          <div class="login_fields">
            <div class="field">
              <label for="email">员工工号：</label>
              <input type="text" name="email" id="email" v-model="syEmp.empNo" tabindex="1" required
                     placeholder="请输入您的员工编号"/>
            </div>

            <div class="field">
              <label for="password">登陆密码： </label>
              <input type="password" name="password" v-model="syEmp.passWord" id="password" required tabindex="2"
                     placeholder="请输入您的密码"/>
            </div>

          </div> <!-- .login_fields -->

          <div class="login_actions">
            <button type="submit" class="btn btn-orange" tabindex="3">登陆</button>
          </div>
        </form>

      </div> <!-- #login_panel -->
    </div>
    <!-- #login -->
  </div>

</div>
<script src="js/vue3.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="js/jquery.min.js"></script>
<script>
  var app = Vue.createApp({
    data() {
      return {
        syEmp: {
          empNo: "",
          passWord: '',
        }
      }
    },
    methods: {
      login() {
        $.getJSON("/syEmp/login", this.syEmp, (json) => {
          console.log(json)
          if (json.code !== 200) {
            alert(json.data.msg)
          } else {
            sessionStorage.setItem("userName", json.data.msg)
            sessionStorage.setItem("empNo", this.syEmp.empNo)
            location.href = "workspace.html";
          }
        })
        return false;
      }
    },
    mounted() {

    }
  })
  app.mount("#app")
</script>
</body>

</html>